<template>
  <div class="ModuleTab">
    <el-row class="tab-box" :gutter="1">
      <el-col :span="2">
        <b>{{moduleName}}</b>
        <span class="divider-vertical">|</span>
      </el-col>
      <el-col :span="16" :xs="10" :sm="6" :md="10" :lg="12">
        <el-tabs v-model="activeName" :value="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item,index) in moduleTab" :label="item.name" :name="item.url" :key="index"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="6" :xs="12" :sm="13" :md="10" :lg="9" class="float-right text-right">
        <span class="model-manager">
          功能管理员: <span>{{manager}}</span>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ModuleTab',
  props: {
    moduleName: {
      type: String,
      default () {
        return 'XX模块' // 模块名
      }
    },
    moduleTab: {
      type: Array,
      default () {
        return [
          {
            name: '', // tab名
            url: '' // 路由地址
          }
        ];
      }
    }
  },
  data () {
    return {
      activeName: '', // 当前的tab
      manager: '' // 管理员
    }
  },
  methods: {
    // 获取模块管理员
    getManager () {
      this.$api.getManager({ moduleId: 1 }).then(res => {
        this.manager = res.name
      })
    },
    // 模块切换
    handleClick () {
      this.$store.commit('setActiveName', this.activeName);
      this.$router.replace(this.$store.state.activeName);
    }
  },
  created () {
    this.$store.commit('setActiveName', this.moduleTab[0].url);
    this.activeName = this.$store.state.activeName;
    this.getManager()
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">

</style>
